<!--
 * @Author: junsong Chen 779217162@qq.com
 * @Date: 2023-06-17 11:12:17
 * @LastEditTime: 2024-08-22 09:32:40
 * @Description:
-->
<template>
  <div v-loading="loading">
    <ag-grid-vue
      ref="gridTableRef"
      style="width: 1000px; height: 800px"
      class="ag-theme-alpine"
      :grid-options="mergedOptions"
      :excel-styles="tableExcelStyles"
      :column-defs="props.tableOptions.columnDefs"
      :row-data="props.tableOptions.rowData"
      :on-pagination-changed="
        throttle(onPaginationChanged, 1500, { trailing: false })
      "
    >
    </ag-grid-vue>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { throttle, debounce } from "lodash-es";
// 引入配置
import {
  GRID_OPTIONS,
  SIDEBAR_CONFIGURATION,
  EXCELSTYLES,
} from "./common/agGrid-config";
// 引入主题
import "./common/agGrid-theme.js";
// 破解文件
import "./common/agGrid-crack.js";
// ag-grid工具
import { AgGridUtils } from "./common/agGrid-utils.js";

// 表格的实例对象
const gridTableRef = ref(null);

const agGridTable = reactive({
  // 表格实例化api
  agGridApi: null,
});

// 默认合并option配置使用计算属性
const mergedOptions = GRID_OPTIONS;
// 设置侧边栏配置
const rewriteSideBar = SIDEBAR_CONFIGURATION;
// 合并表格导出样式
const tableExcelStyles = EXCELSTYLES;

// 表格刷新函数
const onPaginationChanged = (params) => {
  console.log("表格刷新函数", params);
  if (props.tableOptions.rowData?.length) {
    // 实例化自定义个性化api
    agGridTable.agGridApi = new AgGridUtils(params);
  } else {
    // 清空底部合计行
    agGridTable.agGridApi?.gridApi?.setPinnedBottomRowData([]);
  }
};

const props = defineProps({
  // 表格加载loading
  loading: {
    type: Boolean,
    default: false,
  },
  // 表格数据配置 ， 包括表格头和行数据
  tableOptions: {
    type: Object,
    require: true,
    default() {
      return {
        columnDefs: [],
        rowData: [],
      };
    },
  },
});

watch(
  () => props.tableOptions,
  (newVal) => {
    console.log("newVal123123123", newVal);
  }
);

// 对父组件暴露方法以及属性
// expose({ agGridTable });
</script>
